Porting google.xul to the ZK Framework

Author
Henri Chen, Principal Engineer, Potix Corporation

Date
December 18, 2005

Version

What is google.xul?

google.xul(http://www.google.com/mozilla/google.xul) is a frontend for google search with a tabbed interface on the Google site lets you search the Web, Google News, Google Image Search, Google Groups, or Google Directory. It is written in Mozilla XUL (XML User Interface Language) and JavaScript; thus only the Mozilla or Mozilla derived browsers can interpret this page. IE would simply ask you wether you want to download the file when you visit it. What is ZK?

ZK is an open-source Ajax engine which allows you to design the web pages in XUL-like tags(components) and access these components by pure java codes.

The Porting

Because ZK adapts the XUL language as one of its page design language, I decided to port the google.xul to ZK and experience what should be done in such a process. Then I have this ZK page, google.zul, in less than an hour. You can copy the source code onto the ZK's live demo source window; press the Try me! button and see how it works. In fact, this is also how I do the test during the porting. If you have setup a ZK server, you can copy the source code file into the server directory; then visit that page to see how it works.

The Process

The very first thing is to get the google.xul source code. This is easy. Visit the google.xul; view the source code; save as a file.

Then pull the file into the editor. The first thing to do is removing all Mozilla specific style-sheet, tags, and attributes. The ZK server would not be able to locate the resource of chrome://...etc. Some of tags used in google.xul are somehow too old and not used any more such as the <spring> tag that I simply delete them. Some attributes that might not be supported by the ZK (yet) can be implemented by some other ways. For example , in google.xul, the onload attribute of the Window tag is used to move focus to the q textbox. That I put a <zscript>q.focus()</zscript> at the end of the page to do the same thing. Some tags that ZK simply does not support can be replaced with some other tags that serve the same job such as implementing the tabs with ZK's <button> component(google.xul uses a combination of <box> and <text>).

The major porting job is in rewriting JavaScript to Java. First, change all <script> to <zscript> so ZK would interpret it. Second, we have to change the component's id to follow the Java's variable naming rule because ZK automatically binds a component's id as a java variable referencing to that component. For example, the main window's id "google-search" has to be renamed into "google_search" because '-'(dash) is not a leagal variable character; then google_search can be used directly in the Java codes. Third, all getElementById() should be removed because Java access components directly by their id. Forth, change all single quotes with double quotes when specifying strings because Java uses the later one to specify a string literal. One more thing worth to mention is that the "==" operator and "equals()" method for string comparison. In JavaScript, the "==" operator works as "equals()" methods in Java. However, in Java, "==" operator and "equals()" method are different. I did not notice that and that takes me some time to debug. The last, the event handler in JavaScript is written as onclik with lower case 'c' but ZK use Java naming convention onClick with an upper case 'C'. This is easy to found because the ZK interpreter would complian immediatly that "No Such Method of onclick...".

Summary

The porting is not difficult and I can try my source code anytime by feeding them into the "Source" window of the ZK's live demo. It makes it an easy development cycle on designing a page. It is also quite a good tool in doing prototyping or in discussing the specifications with customers. To sum it up, when porting a Mozilla XUL pages into ZK, the following are what should be taken care:

• Remove style-sheets that are specific to the Mozilla browser(chrome://...).
• Remove unused components and attributes.
• Rewrite some XUL tags to suitable ZK's ZUL tags.(e.g. change <text> to <label>)
• Rewrite JavaScript code to Java

• Rename <script> tag to <zscript>
• Rename the component's id to follow the java variable naming rules.
• Remove getElementById() to use the component's id as the reference variable directly.
• Change single quote into double quote for specifying a string.
• Change string comparison from operator "==" into Java method "equals()".
• Change onxyz attribute from lower case to upper case onXyz. (e.g. change onclick to onClick)

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.